<template>
	<div class="food-list" v-if="index===0">
		<van-tree-select
			v-model:main-active-index="data.activeIndex"
			height="88vw"
			:items="data.items"
			@click-nav="navClick"
		>
			<template #content>
				<div v-for="(item,index) in data.subItem" 
					class="item-bg">
					<ListItem 
						:item="item" 
						:handleAdd="handleAdd"
						:handleChange="handleChange"
					/>
				</div>
			</template>
		</van-tree-select>
	</div>
	
	<div v-else-if="index===1">
		评价
	</div>
	
	<div v-else="index===2">
		商家
	</div>
</template>

<script setup>
import { reactive, toRefs } from 'vue';
import ListItem from '../../../components/ListItem.vue';

	const props = defineProps(['index','foodData'])
	
	let data = reactive({
		activeIndex: 0,
		items: [],
		subItem: []
	})
	
	//初始化数据
	const initData = ()=> {
		console.log('初始化数据',data.activeIndex)
		let newArray = []
		props.foodData?.items?.forEach((item,index) => {
			newArray.push({
				text: item.text
			})
			//是数组的最后一项
			if(data.activeIndex === index) {
				data.subItem = item.children
			}
		})
		
		data.items = newArray
	}
	//调用初始化数据
	initData()
	
	const navClick = (i)=> {
		data.activeIndex = i
		initData()
	}
	
	const handleAdd = (id) => {
		data.subItem.forEach((item) => {
			if(item.id === id) {
				item.add = false
				item.num += 1
			}
		})
	}
	
	const handleChange = (value,detail) => {
		// console.log(value,data.subItem[0].num)
		data.subItem.forEach((item) => {
			if(item.id === detail.name) {
				item.num = value
			}
		})
		
	}
</script>

<style lang="less" scoped>
	.food-list {
	margin-top: 20px;
	.item-bg {
	  padding: 10px;
	}
	}
	/deep/ .van-tree-select__item--active {
	  color: #ffc400;
	}
	/deep/ .van-sidebar-item--select::before {
	  background-color: #ffc400;
	}
</style>